<template>
    <div>
        <div class="goodslist">
            <!-- <router-link :to="'/home/goodsinfo/'+item.id" tag="div" class="goodsitem" v-for="item in GoodsList" :key="item.id">
                <img :src="item.img_url" :alt="item.title">
                <h3>{{item.title}}</h3>
                <div class="info">
                    <p class="price">
                        <span class="now">￥{{item.sell_price}}</span>
                        <span class="old">￥{{item.old_price}}</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩余:{{item.stock_quantity}} 件</span>
                    </p>
                </div>
            </router-link> -->
            <!-- 网页中，有两种跳转方式：
                1.：使用a标签的形式叫做 标签跳转。
                2.：使用window.location.href的形式，叫做编程式导航。
             -->
            <div class="goodsitem" v-for="item in GoodsList" :key="item.id">
                <img :src="item.img_url" :alt="item.title" @click="goDetail(item.id)">
                <h3>{{item.title}}</h3>
                <div class="info">
                    <p class="price">
                        <span class="now">￥{{item.sell_price}}</span>
                        <span class="old">￥{{item.old_price}}</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩余:{{item.stock_quantity}} 件</span>
                    </p>
                </div>
            </div>
        <mt-button type="danger" size="large">加载更多</mt-button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            pageIndex: 1, //分页的页数
            GoodsList:[
                {id:1, title:'厂家直销不锈钢密封罐 咖啡豆茶叶罐奶粉储物罐 密封罐四件套装', img_url:'//cbu01.alicdn.com/img/ibank/2018/969/735/9174537969_1257766207.430x430xz.jpg', sell_price: 6.00, old_price: 20.00, stock_quantity:120},
                {id:2, title:'304不锈钢餐盘 多格方型加深加厚成人学生快餐盘食堂饭堂餐具', img_url:'//cbu01.alicdn.com/img/ibank/2019/438/758/10342857834_1257766207.430x430xz.jpg', sell_price:'3.80', old_price:'10.80', stock_quantity:500},
                {id:3, title:'304不锈钢鸳鸯锅清汤锅二味火锅家用涮涮锅 厂家直销可供一件代发', img_url:'//cbu01.alicdn.com/img/ibank/2018/450/740/9341047054_1257766207.430x430xz.jpg', sell_price:25.00, old_price:38, stock_quantity:500},
                {id:4, title:'厂家直销201 304不锈钢快餐盘分格圆餐盘学生儿童快餐盘食堂餐盘', img_url:'//cbu01.alicdn.com/img/ibank/2018/656/294/9010492656_1257766207.430x430xz.jpg', sell_price:4.90, old_price:8.80, stock_quantity:400},
                {id:5, title:'不锈钢汤蒸锅 单层双层多功能锅蒸汤锅蒸火锅多用礼品锅', img_url:'//cbu01.alicdn.com/img/ibank/2018/146/558/9531855641_1257766207.430x430xz.jpg', sell_price:8.00, old_price:15.00, stock_quantity:400},
                {id:6, title:'201 304不锈钢加深带盖方形快餐盘快餐盒 分格带盖便当盒厂家直销', img_url:'//cbu01.alicdn.com/img/ibank/2018/898/444/9165444898_1257766207.430x430xz.jpg', sell_price:2.20, old_price:6.30, stock_quantity:400},
                {id:7, title:'不锈钢日式雪平锅 单柄家用奶锅 平底木柄煮面汤锅电磁炉燃气通用', img_url:'//cbu01.alicdn.com/img/ibank/2018/420/831/9584138024_1257766207.430x430xz.jpg', sell_price:23.00, old_price:33.00, stock_quantity:400},
                {id:8, title:'不锈钢夹碗器 带硅胶碗夹多功能防烫夹厨房跑江湖地摊取盘夹', img_url:'//cbu01.alicdn.com/img/ibank/2019/424/296/11368692424_1257766207.430x430xz.jpg', sell_price:2.90, old_price:5.90, stock_quantity:400},
            ] //存放商品列表的数组
        }
    },
    created(){
        this.getGoodsList();
    },
    methods:{
        getGoodsList(){
            // 获取商品列表数据
            localStorage.setItem('GoodsList',JSON.stringify(this.GoodsList));
        },
        goDetail(id){
            // this.$route是路由参数对象，包含所有路由中的参数，params、query
            // this.$router是路由导航对象，用它可以方便的使用JS代码，实现路由的前进，后退，跳转到新的url地址
            // 1.最简单的
            // this.$router.push('/home/goodsinfo/'+id);
            // 2.传递对象
            // this.$router.push({path: '/home/goodsinfo/'+id});
            // 3.路由的命名:name是路由规则的名字， path和params不能一起用，使用了path的话params会被忽略
            this.$router.push({name:"goodsinfo", params:{id} });
        }
    },
}
</script>
<style lang="scss" scoped>
div{
    margin: 0;
    padding: 0;
}
.goodslist{
    display: flex;
    flex-wrap: wrap;
    padding: 7px;
    justify-content: space-between;
    // text-align: center;
    .goodsitem{
        width: 49%;
        display: inline-block;
        // background-color: gray;
        // margin: 5px;
        border: 1px solid gray;
        box-shadow: 0 0 6px #999;
        margin-bottom: 7px;
        padding: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 293px;
        img{
            // margin: 3px;
            // padding: 0;
            // display: inline-block;
            width: 100%;
            // box-shadow: 0 0 6px #999;
        }
        h3{
            font-size: 14px;
            color: black;
        }
        .info{
            background-color: #eee;
            p{
                margin: 0;
                padding: 2px;
            }
            .price{
                .now{
                    color: red;
                    font-size: 18px;
                    font-weight: 700;
                }
                .old{
                    text-decoration: line-through;
                    margin-left: 5px;
                }
            }
            .sell{
                display: flex;
                justify-content: space-between;
                font-size: 13px;
            }
        }
    }
}
</style>


